import cloneDeep from "lodash/cloneDeep";

// 高级表格生成器配置信息
export const getTableDefaultValue = () => ({
  colSize: 3,
  rowSize: 2,
  columns: [
    {
      colId: "col_id",
      title: "编号",
      width: 100,
      field: "id",
    },
    {
      colId: "col_name",
      title: "名称",
      field: "name",
      // width: 160,
    },
  ],
  data: [],
});

export const getDefaultApi = () => ({
  enable: false,
  url: "",
  method: "get",
  dataPath: "data.list",
  params: {},
});

export const unTableConfig = {
  // 组件的自定义配置
  __config__: {
    label: "高级表格",
    labelWidth: null,
    showLabel: true,
    changeTag: true,
    tag: "UnTable",
    tagIcon: "table",
    defaultValue: getTableDefaultValue(),
    required: false,
    layout: "colFormItem",
    span: 24,
    document: "https://vxetable.cn",
    // 正则校验规则
    regList: [],
  },
  // 其余的为可直接写在组件标签上的属性
  align: "left",
  size: "medium", // 尺寸
  border: false, // 边框，进行单元格合并，建议开启；
  // 调用接口
  // api: undefined,
  // mergeType: undefined,
  // rowMergedColFields: undefined,
  // mergeCells: undefined,

  // 样式设置
  headerRowStyle: null,
  headerCellStyle: null,
  showHeader: true,

  // 编辑操作
  editConfig: false,
};

// 高级表哥属性配置
export const getTableProps = () => ({
  // 保存表格动态数据信息
  value: {
    type: Object,
    default() {
      return {
        colSize: 0,
        rowSize: 0,
        columns: [],
        data: [],
      };
    },
  },
  // 对齐方式
  align: {
    type: String,
    default: "left",
  },
  // 尺寸
  size: {
    type: String,
    default: "medium",
  },
  border: { type: Boolean },
  // 启用数据API配置
  api: Object,
  // 是否自动合并单元格行或列
  mergeType: {
    type: String,
    validator(val) {
      // 不合并；按行合并（同一字段相邻行，值相同合并）；手动设置合并
      return ["", "row", "handle"].indexOf(val) !== -1;
    },
  },
  // 按行合并时，配置的可以合并的列字段
  rowMergedColFields: Array,
  spanMethod: Function,
  // 手动设置合并时，配置的合并行列数据
  mergeCells: Array,
  // 编辑配置
  editConfig: [Boolean, Object],

  /* 特殊列设置 */
  // 首行配置
  firstCol: Object,

  // 样式设置
  headerRowStyle: Object, // 表头行样式
  headerCellStyle: Object, // 表头单元格样式
  showHeader: { type: Boolean, default: true }, // 是否显示表头
});

export const getDefaultColumnEditRender = () => ({
  enabled: false,
  // 编辑时使用的第三方组件，非内置，默认element input
  componentName: "el-input",
});

const columnProps = {
  colId: "",
  // 渲染类型 seq,radio,checkbox,expand,html
  type: undefined,
  // 列字段名
  field: undefined,
  // 列标题
  title: "",
  // 列宽度
  width: "",
  // 列最小宽度，把剩余宽度按比例分配
  minWidth: undefined,
  // 列最大宽度
  maxWidth: undefined,
  // 是否允许拖动列宽调整大小
  resizable: undefined,
  // 将列固定在左侧或者右侧
  fixed: undefined,
  // 列对其方式
  align: undefined,
  // 表头对齐方式
  headerAlign: undefined,
  // 表尾列的对齐方式
  footerAlign: undefined,
  // 当内容过长时显示为省略号
  showOverflow: undefined,
  // 当表头内容过长时显示为省略号
  showHeaderOverflow: undefined,
  // 当表尾内容过长时显示为省略号
  showFooterOverflow: undefined,
  // 给单元格附加 className
  className: undefined,
  // 给表头单元格附加 className
  headerClassName: undefined,
  // 给表尾单元格附加 className
  footerClassName: undefined,
  // 格式化显示内容
  formatter: undefined,
  // 是否允许排序
  sortable: undefined,
  // 在 v3 中废弃
  remoteSort: undefined,
  // 在 v3 中只支持字符串类型
  sortBy: undefined,
  // 排序的字段类型，比如字符串转数值等
  sortType: undefined,
  // 在 v3 中废弃
  sortMethod: undefined,
  // 配置筛选条件数组
  filters: undefined,
  // 筛选是否允许多选
  filterMultiple: undefined,
  // 自定义筛选方法
  filterMethod: undefined,
  // 筛选重置方法
  filterResetMethod: undefined,
  // 筛选复原方法
  filterRecoverMethod: undefined,
  // 筛选模板配置项
  filterRender: undefined,
  // 指定为树节点
  treeNode: undefined,
  // 是否可视
  visible: undefined,
  // 单元格数据导出方法
  exportMethod: undefined,
  // 表尾单元格数据导出方法
  footerExportMethod: undefined,
  // 标题帮助图标配置项
  titlePrefix: undefined,
  // 单元格值类型
  cellType: undefined,
  // 单元格渲染配置项
  cellRender: undefined,
  // 单元格编辑渲染配置项
  editRender: undefined,
  // 内容渲染配置项
  contentRender: undefined,
  // 额外的参数
  params: undefined,
};

export const getDefaultColumnProps = () => cloneDeep(columnProps);
